<template>
    <Search></Search>
    <!-- 导航 -->

    <van-tabs v-model:active="active" :lazy-render="true" @click-tab="btn">

        <van-tab :title="item.name" v-for="item in category" :key="item.id">
            <van-tree-select v-model:main-active-index="activeIndex" height="700px" @click-nav="leftNav" :items="items">
                <template #content>
                   
                    <van-card
                        :tag="`${index + 1} `"
                        :desc="item.salePoint"
                        :title="item.albumTitle"
                        :lazy-load="true"
                        :thumb="`//imagev2.xmcdn.com/${item.cover}`"
                        v-for="(item,index) in cart" :Key="item.id" 
                       style="font-size: 16px; line-height: 1.38; "
                    >
                     <template #bottom>
                        <div class="count">
                            <i class="iconfont icon-ic_play"></i>
                            {{item.playCount>100000000 ? (item.playCount/100000000).toFixed(2)+ '亿' :(item.playCount/100000000).toFixed(2) + '万'}} 
                        </div>
                        <div class="count">
                            <i class="iconfont icon-vuesax-outline-sound"></i>
                            {{item.trackCount}} 
                        </div>
                     </template>
                    </van-card>


                </template>
            </van-tree-select>
        </van-tab>


    </van-tabs>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Search from '@/components/search/index.vue';
import { gitRank, gitRanking } from '@/api/Rink'

const active = ref(0);
const activeIndex = ref(0);
const items = ref<any>([])
const category = ref<any>([])
const sceneId = ref(1)
// 头部导航
// const getRanklist = async () => {
//     try {
//         let result = await gitRank(sceneId.value)
//         category.value = result.data.tabLists
//         sideBar.value = result.data.tabLists[0].tabWraps
//         // console.log(sideBar.value)
//         items.value = (sideBar.value.map((item: { name: any; }) => {
//             return { text: item.name }

//         }))
//         // console.log(items.value)
//     } catch (error) {
//         console.error(error)
//     }
// }
const getRanklist = async () => {
    try {
        let result = await gitRank(sceneId.value)
        category.value = result.data.tabLists
        items.value = category.value[0].tabWraps.map((item: { name: any; }) => {
            return { text: item.name }
        })
  
    } catch (error) {
        console.error(error)
    }
}
const btn = ({ name }: { name: number }) => {

    items.value = category.value[name].tabWraps.map((item: { name: any; }) => {
        return { text: item.name }
    })


}
const leftNav = async (i: number) => {
    let id = category.value[i].tabWraps[i].rankingId

    try {
        let result = await gitRanking(id)
        cart.value = result.data.rankList[0].albums.splice(0, 40)
        // console.log(cart.value);
    } catch (error) {
        console.error(error)
    }
}
const cart = ref<any[]>([])
const getRankingList = async () => {
    try {
        let result = await gitRanking(100006)
        cart.value = result.data.rankList[0].albums.splice(0, 40)
        console.log(cart.value);

    } catch (error) {
        console.error(error)
    }
}

onMounted(() => {
    getRanklist()
    getRankingList()
})
</script>

<style lang="less" scoped>
/deep/.van-tree-select__nav {
    flex: 0.5;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(104, 35, 35,0.02)
}

.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}

.count {
    float: left;
    margin-right: 10px;
    color: #7e8c8d;
    font-size: 11px;
}

.iconfont {
    font-size: 11px;
    margin-right: 2px
}

.van-tree-select {
    line-height: 22px;
}

/deep/.van-card__title {
    font-size: 16px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    width:160px;
}

/deep/.van-card__desc {
    margin-bottom: 10px;
    max-width: 100%;
    font-size: 13px;
    margin: 10px 0 7px
}
/deep/.van-card__content{
    padding:0px 20px;
    width:149px;
}
/deep/.van-image__img{
    padding:0px 15px; 
}
/deep/.van-card:nth-child(1) .van-tag--mark{
    margin-left: -15px;
    background-color:rgb(239, 45, 77);
    color:rgb(247, 248,250);
    font-weight: 100;
    font-size: 12px;
}
/deep/.van-card:nth-child(2) .van-tag--mark{
    margin-left: -15px;
    background-color:rgb(239, 139, 44);
    color:rgb(247, 248,250);
    font-weight: 100;
    font-size: 12px;
}
/deep/.van-card:nth-child(3) .van-tag--mark{
    margin-left: -15px;
    background-color:rgb(246, 147, 35);
    color:rgb(247, 248,250);
    font-weight: 100;
    font-size: 12px;
}
/deep/.van-card .van-tag--mark{
    margin-left: -15px;
    background-color:rgb(247, 248,250);
    color: black;
    font-weight: 600;
    font-size: 16px;
}


</style>